<script setup>
import {onMounted, ref} from 'vue'
import {RouterLink, RouterView, useRouter} from 'vue-router'
import * as echarts from 'echarts';
import axios  from "axios";
import { ElMessageBox } from 'element-plus'

const showAlert = ref(false);
const dialogVisible = ref(false)

const inputPassWord = () => {

}
const handleClose = () => {
  ElMessageBox.confirm('你确定想退出修改密码界面吗？')
      .then(() => {
        dialogVisible.value = false
      })
      .catch(() => {
        // catch error
      })
}
const showdialog = () => {
  dialogVisible.value = true
}
const showdialog1 = () => {
  dialogVisible.value = false
  showAlert.value = true
}
</script>

<template>
  <el-card>
    <h1>修改密码</h1>
    <el-text class="mx-1">请输入您的旧密码</el-text>
    <el-input v-model="xxxx" style="width: 240px" placeholder="请输入" />
    <el-button type="primary" @click="showdialog">确定</el-button>
    <el-alert class="center-alert" v-if="showAlert" title="成功修改" type="success" show-icon />
  </el-card>
  <el-dialog
      v-model="dialogVisible"
      title="提示"
      width="500"
      :before-close="handleClose"
  >
    <span>您确认要修改密码吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="showdialog1">
          确定修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.center-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  width: auto;
  max-width: 80%;
}
</style>